<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./icofont/iconfont.css">
    <script src="./js/jquery-1.11.1.min.js"></script>
    <!-- <script src="./js/jquery1.42.min.js"></script> -->
    <script src="./js/jquery.SuperSlide.2.1.1.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="headerTop container">
            <!-- 顶部中间的logo图 -->
            <div class="logo fl">
                <img src="./images/index/logo.png" alt="">
            </div>
            <!-- 登陆注册那一块 -->
            <ul class="fr">
                <a href="#"><i class="iconfont icondenglu"></i>登陆/注册</a>
                <a href="#"><i class="iconfont iconcar"></i><span>0</span>购物车</a>
                <a href="#"><i class="iconfont iconfaxian"></i></a>
            </ul>
        </div>
        <!-- 导航条 -->
        <div class="headerBottom container">
            <ul>
                <a href="#"><i class="iconfont iconaixin"></i>新品介绍</a>
                <a href="#"><i class="iconfont iconaixin"></i>买一送一</a>
                <a href="#"><i class="iconfont iconaixin"></i>2件任选特惠(最高现省660)</a>
                <a href="#"><i class="iconfont iconaixin"></i>香水</a>
                <a href="#"><i class="iconfont iconaixin"></i>空间香气</a>
                <a href="#"><i class="iconfont iconaixin"></i>周边小物</a>
                <a href="#"><i class="iconfont iconaixin"></i>预定商品</a>
                <a href="#">关于我们</a>
                <a href="#">联络我们</a>
                <a href="#"><i class="iconfont iconaixin">购买时间</i></a>
            </ul>
        </div>
    </header>

    <!-- 轮播图 -->
    <div class="banner container">
        <div id="SlideBox" class="SlideBox">
            <div class="hd">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="ce">
                <ul>
                    <li><img src="./images/index/logo_1.jpg"></li>
                    <li><img src="./images/index/logo_2.jpg"></li>
                    <li><img src="./images/index/logo_3.jpg"></li>
                </ul>
            </div>
            <!-- 下面是前/后按钮代码，如果不需要删除即可 -->
            <a class="prev" href="javascript:void(0)"><img src="images/index/ctrl.png"></a>
            <a class="next" href="javascript:void(0)"><img src="images/index/ctrr.png"></a>
        </div>
    </div>

    <!-- 畅销及新品 -->
    <div class="bestCeller container">
        <!-- 标题 -->
        <p>
            <span>BESTSELLER & NEW</span>畅销及新品
        </p>
        <!-- 图片滚动 -->
        <div class="besrCellSlide">

        </div>
        <div class="besrCellDiv">
            <img src="./images/index/div_1.jpg" alt="">
            <img src="./images/index/div_2.jpg" alt="">
        </div>
    </div>


    <!-- 店长推荐 -->
    <div class="recommend container">
        <!-- 标题 -->
        <p>
            <span>强档活动推销</span>店长推荐
        </p>
        <table>
            <tr>
                <td>
                    <figure>
                        <img src="./images/index/recomend_1.jpeg" alt="">
                        <figcaption>
                            <h2>氣味圖書館 Demeter</h2>
                            <h3>【炼乳】Kitten Fur 15ml 抹</h3>
                        </figcaption>
                        <p>
                            NT$800 <del>NT$1100</del>
                        </p>
                        <a href="#">
                            已售完
                        </a>
                    </figure>
                    <div>
                        <i class="iconfont iconaixin"></i>
                    </div>
                </td>
                <td>
                    <figure>
                        <img src="./images/index/recomend_2.jpeg" alt="">
                        <figcaption>
                            <h2>氣味圖書館 Demeter</h2>
                            <h3> 【琴湯尼】 Gin Tonic 香水30ml</h3>
                        </figcaption>
                        <p>
                            NT$800 <del>NT$1100</del>
                        </p>
                        <a href="#">
                            加入购物车
                        </a>
                    </figure>
                    <div>
                        <i class="iconfont iconaixin"></i>
                    </div>
                </td>
                <td>
                    <figure>
                        <img src="./images/index/recomend_3.jpeg" alt="">
                        <figcaption>
                            <h2>氣味圖書館 Demeter 【月光】</h2>
                            <h3>Moonbeam 香水30ml(網)</h3>
                        </figcaption>
                        <p>
                            NT$800 <del>NT$1100</del>
                        </p>
                        <a href="#">
                            已售完
                        </a>
                    </figure>
                    <div>
                        <i class="iconfont iconaixin"></i>
                    </div>
                </td>
                <td>
                    <figure>
                        <img src="./images/index/div_1.jpg" alt="">
                        <figcaption>
                            <h2>氣味圖書館 Demeter 【雨】</h2>
                            <h3>Rain 香水30ml(網)</h3>
                        </figcaption>
                        <p>
                            NT$800 <del>NT$1100</del>
                        </p>
                        <a href="#">
                            加入购物车
                        </a>
                    </figure>
                    <div>
                        <i class="iconfont iconaixin"></i>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <figure>
                        <img src="./images/index/prod_4.jpeg" alt="">
                        <figcaption>
                            这是描述部分
                        </figcaption>
                        <p>
                            价格部分
                        </p>
                        <a href="#">
                            加入购物车
                        </a>
                    </figure>
                    <div>
                        <i class="iconfont iconaixin"></i>
                    </div>
                </td>
                <td>
                    <figure>
                        <img src="./images/index/prod_1.jpeg" alt="">
                        <figcaption>
                            这是描述部分
                        </figcaption>
                        <p>
                            价格部分
                        </p>
                        <a href="#">
                            加入购物车
                        </a>
                    </figure>
                    <div>
                        <i class="iconfont iconaixin"></i>
                    </div>
                </td>
                <td>
                    <figure>
                        <img src="./images/index/prod_2.jpeg" alt="">
                        <figcaption>
                            这是描述部分
                        </figcaption>
                        <p>
                            价格部分
                        </p>
                        <a href="#">
                            加入购物车
                        </a>
                    </figure>
                    <div>
                        <i class="iconfont iconaixin"></i>
                    </div>
                </td>
                <td>
                    <figure>
                        <img src="./images/index/prod_3.jpeg" alt="">
                        <figcaption>
                            这是描述部分
                        </figcaption>
                        <p>
                            价格部分
                        </p>
                        <a href="#">
                            加入购物车
                        </a>
                    </figure>
                    <div>
                        <i class="iconfont iconaixin"></i>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <figure>
                        <img src="./images/index/prod_3.jpeg" alt="">
                        <figcaption>
                            这是描述部分
                        </figcaption>
                        <p>
                            价格部分
                        </p>
                        <a href="#">
                            加入购物车
                        </a>
                    </figure>
                    <div>
                        <i class="iconfont iconaixin"></i>
                    </div>
                </td>
                <td>
                    <figure>
                        <img src="./images/index/prod_2.jpeg" alt="">
                        <figcaption>
                            这是描述部分
                        </figcaption>
                        <p>
                            价格部分
                        </p>
                        <a href="#">
                            加入购物车
                        </a>
                    </figure>
                    <div>
                        <i class="iconfont iconaixin"></i>
                    </div>
                </td>
                <td>
                    <figure>
                        <img src="./images/index/prod_4.jpeg" alt="">
                        <figcaption>
                            这是描述部分
                        </figcaption>
                        <p>
                            价格部分
                        </p>
                        <a href="#">
                            加入购物车
                        </a>
                    </figure>
                    <div>
                        <i class="iconfont iconaixin"></i>
                    </div>
                </td>
                <td>
                    <figure>
                        <img src="./images/index/prod_1.jpeg" alt="">
                        <figcaption>
                            这是描述部分
                        </figcaption>
                        <p>
                            价格部分
                        </p>
                        <a href="#">
                            加入购物车
                        </a>
                    </figure>
                    <div>
                        <i class="iconfont iconaixin"></i>
                    </div>
                </td>
            </tr>
        </table>
        <div class="recommedDiv">
            <img src="./images/index/1.jpg" alt="">
            <img src="./images/index/2.jpg" alt="">
            <img src="./images/index/3.jpg" alt="">
        </div>
    </div>

    <!-- 尾部 -->
    <footer>
        <div class="container">
            <div class="footerTop">
                <div class="aboutUs fl">
                    <div class="footerTitle">
                        <h3>关于我们</h3>
                    </div>
                    <ul>
                        <li><i class="iconfont iconxinfeng"></i><a href="#">service@scentlibrary.com.tw</a></li>
                        <li><i class="iconfont iconshizhong"></i>10:00-18:00</li>
                    </ul>
                </div>
                <div class="byNotice fl">
                    <div class="footerTitle footerTitleR">
                        <h3>购物须知</h3>
                    </div>
                    <ul>
                        <li><a href="#">购物须知</a></li>
                        <li><a href="#">售后服务</a></li>
                        <li><a href="#">隐私权政策</a></li>
                    </ul>
                </div>
            </div>
            <div class="footerBottom">
                <div class="footerBottomL">
                    Copyright © <a href="#">氣味圖書館scentlibrary</a> All Rights Reserved. Designed by <a
                        href="#">Cyberbiz</a>.
                </div>
                <div class="footerBottomR">
                    <ul>
                        <li><a href="#"><i class="iconfont iconFacebook"></i></a></li>
                        <li><a href="#"><i class="iconfont iconcarema"></i></a></li>
                        <li><a href="#"><i class="iconfont iconxingzhuangjiehe"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>




</body>

</html>